<!--
 * @Date: 2020-07-13 17:50:09
 * @LastEditors: leehave
 * @LastEditTime: 2020-09-04 15:48:04
-->
<template>
  <div class="about-wrapper">
    <div class="banner">
      <img :src="intro.cpicurl" alt="" srcset="">
    </div>


    <div class="table-panel">
      <div class="table-title">
        <h3>{{intro.name}}</h3>
      </div>
      <div class="text" v-html="intro.cmoban"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { introduceService } from '@/service/user';
export default {
  data() {
    return {
      staticPath: process.env.VUE_APP_STATIC_PATH,
      intro:{}
    };
  },
  computed: {
    ...mapGetters(["appInfo"]),
  },
  created() {
    this.$store.dispatch('app/setAppInfoAction',{})
    this.fetchIntro()
  },
  mounted() {},
  watch: {},
  methods: {
    async fetchIntro(){
      let result = await introduceService(6)
      if(result.status == 200){
        this.intro = result.data
      }else{
        this.$toast(result.message)
      }
    }
  },
  components: {}
};
</script>

<style lang="less">
.about-wrapper {
  height: 100vh;
  background: #f5f5f5;
  img{
    width: 100%;
  }
  .table-panel{
    margin-top: 10px;
    background: #fff;
    padding: 10px 0;
    .table-title{
      font-size: 16px;
      color: #4ECE40;
      padding: 0 10px;
      h3{
        display: block;
        border-left: 2px solid #4ECE40;
        padding: 0 0 0 10px;
        margin: 10px 0;
      }
    }
    .text{
      font-size: 13px;
      color: #666666;
      padding: 0 10px;
      p{
        line-height: 1.5;
        font-size: 13px;
      }
    }
  }
  .banner{
    height: 150px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .panel{
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    z-index: 1;
    margin-top: -10px;
    padding: 15px;
    .media{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .media-left{
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        margin-right: 10px;
      }
      .media-right{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-direction: column;
        h3{
          font-size: 18px;
          margin-bottom: 10px;
        }
      }
    }
    .cell-wrapper{
      .van-cell{
        padding-left: 0;
        padding-right: 0;
        .van-icon{
          font-size: 20px;
        }
      }
    }
  }
  .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
    border-width: 0;
  }
}

</style>
